/* Doctype Personna - Themeforest.net vCard Template
 * Copyright 2012, Jan O. Waldeck (jwaldeck.com)
 * www.doctype-themes.com
 * http://themeforest.net/user/doctypemedia
 * 11/2012
 */

/* Website Variables
 * -------------------------------------------------------------------------------------- 
 * ====================================================================================== */

/* Green Color Example
@primary-color: #556a63;
@secondary-color: #859d95;
@contrast-color: #8d3c39;

@primary-title: #8d3c39;
@secondary-title: #556a63;*/

/* Corona Color Example
@primary-color: #0f2e4a;
@secondary-color: #164875;
@contrast-color: #f3a600;

@primary-title: #0f2e4a;
@secondary-title: #164875;*/

/* Black and Yellow Yellow Color Example
@primary-color: #1d1d1d;
@secondary-color: #000;
@contrast-color: #ffcd00;

@primary-title: #000;
@secondary-title: #717171;*/

@primary-color: #14314f;
@secondary-color: #14314f;
@contrast-color: #cc9900;

@primary-title: #1d4050;
@secondary-title: #3a728b;

@primary-color-light: lighten(@primary-color, 10%);

@light-text: #fff;
@dark-text: #000;
@grey: #717171;
@dark-grey: #404040;

@site_font: 'Arial','Helvetica', sans-serif;
@secondary_site_font: 'Arial','Helvetica', sans-serif;

/* Table of Content
==================================================
	#Site Styles (~line 66)
	#Menu (~line 332)
	#Profile Settings (~line 404)
	#Portfolio Settings (~line 431)
	#Portfolio Settings (~line 431)
  #Resumé Settings (~line 556)
  #Contact Settings (~line 633)
  #Style Overrides (~line 704)
  #Media Queries (~line 716)
  
  

/* #Site Styles
================================================== */

body{
  background-color: @secondary-color;
  font-family: @site_font;
}
p {
  line-height: 1.5em;
   margin: 5px 0 10px 0; 
}
.hidden {
  display: none;
}

hr.sections { border: solid #ddd; border-width: 0; clear: both; margin: 30px 0; height: 10px;background: transparent url(../images/hr-sections.png) center center repeat; }
hr { margin: 20px 0; }


/*a:link{color:@primary-color;text-decoration:underline;}
a:visited {
  color: @contrast-color;
  text-decoration: none;
  -webkit-transition: background-color 0.2s ease, border 0.2s ease, color 0.2s ease, opacity 0.2s ease-in-out;
  -moz-transition: background-color 0.2s ease, border 0.2s ease, color 0.2s ease, opacity 0.2s ease-in-out;
  -ms-transition: background-color 0.2s ease, border 0.2s ease, color 0.2s ease, opacity 0.2s ease-in-out;
  -o-transition: background-color 0.2s ease, border 0.2s ease, color 0.2s ease, opacity 0.2s ease-in-out;
  transition: background-color 0.2s ease, border 0.2s ease, color 0.2s ease, opacity 0.2s ease-in-out; } 
 a:hover{color:@contrast-color;text-decoration:none;}
a > * {
  color: #3a3a3a;
  text-decoration: none;
  -webkit-transition: background-color 0.2s ease, border 0.2s ease, color 0.2s ease, opacity 0.2s ease-in-out;
  -moz-transition: background-color 0.2s ease, border 0.2s ease, color 0.2s ease, opacity 0.2s ease-in-out;
  -ms-transition: background-color 0.2s ease, border 0.2s ease, color 0.2s ease, opacity 0.2s ease-in-out;
  -o-transition: background-color 0.2s ease, border 0.2s ease, color 0.2s ease, opacity 0.2s ease-in-out;
  transition: background-color 0.2s ease, border 0.2s ease, color 0.2s ease, opacity 0.2s ease-in-out; }
    */
  
h1, h2, h3, h4 {
  font-family: @site_font;
  color: @primary-title;
  line-height: 0.9em;
}  
h2{
  font-size: 1.4em;
  font-weight: 600;
  margin: 0 0 20px 0;
  
}

h3{
  font-family: @secondary_site_font;
  color: @secondary-title;
  font-weight: 400;
  font-size: 1.2em;
}
h4 {
  font-family: @site_font;
  font-size: .9em;
  line-height: .65em;
  padding: 0 0 20px 0;
}

#header{
  background: transparent url(../images/header-bg-glow.png) center top no-repeat;
  height: 164px;
  background-color:#14314f;
  position: relative;
}


#logo {
  float: left;
  margin: 13px 0 0 0;
  text-transform: uppercase;
  text-align: left;
  display: block;
  a {
    font-size: 32px;
    color: @light-text;
    font-weight: 600;
    padding: 0 0 8px 0;
    display: block;
  }
  .slogan{
    font-size: 14px;
    color: @light-text;
    font-weight: 200;
  }
}

#socials {
  position: absolute;
  top: 120px;
   }

#socials a.facebook, #socials a.google, #socials a.twitter, #socials a.linkedin, #socials a.dribble, #socials a.deviantart, #socials a.flickr, #socials a.skype, #socials a.pinterest, #socials a.vimeo {
    display: block;
    text-indent: -5000px;
    width: 25px;
    height: 25px;
    padding: 0;
    float: left;
    margin: 0 6px 0 0;
    background: @primary-color-light url(../images/site-sprites.png) no-repeat 0 0; 
    }

#socials a.facebook {
    background-image: url(../images/site-sprites.png) no-repeat 0 0;
    &:hover {
    background-color: #3B5998;
    }
}
#socials a.linkedin {
    background-image: url(../images/site-sprites.png) no-repeat;
    background-position: -75px 0;
    &:hover {
    background-color: #0071b5;
    }
}

#socials a.google{
    background-image:url(../images//site-sprites.png) no-repeat;
    background-position:-25px 0;
    &:hover{
    background-color: #DC4D32;
    }
}


#content {
  background-color: #f9f9f9;
  background-image: url(../images/content-bg7.png);
  border-bottom: 10px solid #cc9900;
  border-top: 10px solid #cc9900;
  padding: 15px 0 15px 0;
}

#loading {
  background: transparent url(../images/ajax-loader.gif) center center no-repeat;
  width: 100%;
  text-align: center;
  height: 200px;
}
#profile, #portfolio, #resume, #contact {
    padding: 25px 0;
    height: auto;
    margin: 0 auto;
}
.menu,#profile, #profile, #portfolio, #resume, #contact {
  display:none;
}

dl{
  line-height: 1.2em;
  }

dt {
  font-weight: 600;
  margin: 8px 0 0 0;
}

#style-switcher {

	position:absolute;
	right:0;
	top:200px;
	width:25px;
	padding:15px 20px 0 10px;
	border-radius: 5px 0 0 5px;
	-moz-border-radius: 5px 0 0 5px;
	-webkit-border-radius: 0 4px 4px 0;
	background: #202020 url(../images/style-switcher-label.png) center right no-repeat;
	}
#style-switcher ul {
  margin: 0;
  padding: 0;
}
#style-switcher ul li img{
	border:1px solid #FFF;
	}


#toTop {
	display:none;
	text-decoration:none;
	position:fixed;
	bottom:10px;
	right:10px;
	overflow:hidden;
	width:51px;
	height:51px;
	border:none;
	text-indent:100%;
	background:url(../images/ui.totop.png) no-repeat left top;
	z-index: 100;
}

#toTopHover {
	background:url(../images/ui.totop.png) no-repeat left -51px;
	width:51px;
	height:51px;
	display:block;
	overflow:hidden;
	float:left;
	opacity: 0;
	-moz-opacity: 0;
	filter:alpha(opacity=0);
}

#toTop:active, #toTop:focus {
	outline:none;
}

#footer {
  /*background: transparent url(../images/footer-bg-glow.png) center top no-repeat;*/
  /*min-height: 180px;*/
  font-size: 12px;
  /*padding: 20px 0;*/
  z-index: 10000;
}
  
#footer p {
  color: @light-text;
  text-transform: uppercase;
   font-size:1em;
    text-align:center;
    margin-top:14px;
}
  
#footer p strong {
    color: @light-text;
    font-weight: bold;
}


/* ==================================================
   #Menu
================================================== */

.menu {
	top: 0;
	height: 174px;
	position:absolute;
	width: 400px;
	left: 50%;
}

.responsive-nav {
  height: 34px;
  width: 100%;
  padding: 5px;
  z-index: 200;
  float: left;
  margin-top: 7px;
  margin: 5px 0;
  clear: both;
  position: relative;
  display: none;
}
  
.nav {
	z-index:100;
}
.nav li {
  float: left;
  margin-right: 15px;
  
}
.nav li > a {
	width:80px;
	height: 174px;
	line-height: 275px;
	display:block;
	background-repeat:no-repeat;
	font-size:16px;
	text-align:center;
	color: #fff;
	text-decoration: none;

}
body.home li a.home {
  background: @contrast-color url('../images/tab-hover.png') center bottom no-repeat;
  position: relative;
  overflow: show;
	a{
	 color:#fff;
	}
}

body.articles li a.articles {
  background: @contrast-color url('../images/tab-hover.png') center bottom no-repeat;
  position: relative;
  overflow: show;
	a{
	 color:#fff;
	}
}

 body.resume li a.resume{
  background: @contrast-color url('../images/tab-hover.png') center bottom no-repeat;
  position: relative;
  overflow: show;
	a{
	 color:#fff;
	}
}

body.contact li a.contact {
  background: @contrast-color url('../images/tab-hover.png') center bottom no-repeat;
  position: relative;
  overflow: show;
	a{
	 color:#fff;
	}
}

.nav li.active .tab-profile {
	background-image:url(../images/menu-sprite.png);
	background-position: 0 0;
}
.nav li.active .tab-portfolio {
	background-image:url(../images/menu-sprite.png);
	background-position: -80px 0;
}
.nav li.active .tab-resume {
	background-image:url(../images/menu-sprite.png);
	background-position:-160px 0;
}
.nav li.active .tab-contact {
	background-image:url(../images/menu-sprite.png);
	background-position:-240px 0;
}


/* ==================================================
   #Profile Settings
================================================== */

#profile h1 {
margin: 5px 0 13px 0;
}
#profile h3 {
margin: -5px 0 22px 0;
color: @contrast-color;
}
  
#profile dt {
  color: @secondary-title;
  margin: 8px 0 -1px 0;
  font-size: 18px;
  font-weight: 200;
}
#profile dd {
  font-family: @secondary_site_font;
  margin-bottom: 10px;
}

#profile .avatar {
  background: transparent url(../images/profile-bg-avatar.png);
  width: 260px;
  height: 297px;
  }
  
#profile .avatar img{
  padding: 28px 0 0 26px; 
  }
.avatar {
    margin-top:14px;
}
.with-margin{
  margin-top: 10px;
}

dl.personal{
  padding-left: 30px;
  background: transparent url(../images/left-stripes.png) left top repeat-y;
  color: @dark-grey;
  line-height: 1.5em;
}

  
/* ==================================================
   #Portfolio Settings
================================================== */  


/*-------------------------------------------------------*/

/*style rule(s) for articles table on intro page for each one*/
table.articles{
	width:250px;
	margin:25px auto;
	padding:0;
	border-collapse:collapse;
	border:1px solid #ccc;
	border-right:1px solid #14314F;
	border-bottom:1px solid #14314F;
	border-right-width:2px;
	border-bottom-width:2px;
	font-size:0.95em;
}
table.articles td{
	border:1px solid #777;
	background-image:none;
}
table.articles td.header{
	background-image:none;
	background-color:#c90;
	color:#14314f;
	font-weight:bold;
	text-align:center;
}
table.articles td.caption{
	text-align:center;
	font-weight:bold;
	vertical-align:top;
}
table.articles td{
	padding:4px;
}

table.crud{
    width:770px;
    margin:0 auto;
    border:1px solid #000;
}
table.crud td{
    border:1px solid #000;
    padding:10px;
}

/* ==================================================
   #Resumé Settings
================================================== */  

#resume .year {
  text-align: center;
  color: @grey;
  border: 1px solid #e7e7e7;
  background-color: #f8f8f8;
  margin: 2px 0 10px 0;
  padding: 2px 4px;
}

#resume.container h3 {
  margin: 4px 0 0 0;
}
#resume h4 {
  color: @contrast-color;
  margin: -20px 0 10px 0;
}

.side {
  margin-top: -16px;
}

#resume .side h2 {
  font-size: 20px;
  margin-top: 20px;
  font-weight: 200;
  letter-spacing: 0;
}
#resume .skills {
  padding-left: 30px;
  background: transparent url(../images/left-stripes.png) left top repeat-y;
  margin-bottom: 50px;
}
/*degree styles*/
h4.degree{
    font-weight:bold;
}
.year{
    font-size:.8em;
}
ul.indent{
    padding-left:34px;
    /*font-size:.90em;*/
}
/*ul.indent li ul li{
    font-size:1em;
}
ul.indent li ul ol{
    font-size:1em;
}*/
/*ol li{
    font-size:.95em;
}*/
/*ol li ol li ol li{
    font-size:1.1em;
}*/
/*ul.indent li ul li ul li ul li{
    font-size:1.2em;
}*/
h4.accomplishments{
    font-style:italic;
}

/* ==================================================
   #Contact Settings
================================================== */ 


#contact .input-block {
  float: left;
  margin-right: 20px;
}

#contact .last {
  margin: 0;
}

#contact textarea.full-width {
  width: 450px;
}

#contact .done {
  background: #fff url(../images/ico-success.png) no-repeat 2px;
  font-size:11px;
  display:none;
  color:#83cf1d;
  padding:5px 0 5px 30px;
  border: 2px solid #83cf1d;
}
#contact .done strong  {
color:#83cf1d;
}

#contact .form .hightlight
{
  border:1px solid #9F1319;
  background:#e4e4e4 url(../images/ico-error-small.png) no-repeat right top;
}

#contact form .loading
{
  float:right;
  background: transparent url(../images/ajax-loader.gif) no-repeat right bottom;
  height:31px;
  width:31px;
  display:none;
}

#contact .email {
  background: transparent url(../images/site-sprites.png) no-repeat -175px -50px; 
  padding: 3px 0 3px 30px;
  margin: 0 0 -4px 0;
}
#contact .website {
  background: transparent url(../images/site-sprites.png) no-repeat -175px -100px; 
  padding: 3px 0 3px 30px;
}
#contact #submit {
  margin-top: 20px;
}

/*hide articles show from contact page initially*/
#articles
{
	display:none;
}

/* ==================================================
   # Style Overrides
================================================== */ 

#fancybox-content {
	border: 1px solid #fff;

}
div #fancybox-title-inside {
  padding-top: 10px;
}

#loading
    {
        display:none;
        position:fixed;
        left:0;
        top:0;
        width:100%;
        height:100%;
        background:rgba(255,255,255,0.8);
		z-index:1000;
    }
  
    #loadingcontent
    {
        display:table;
        position:fixed;
        left:0;
        top:0;
        width:100%;
        height:100%;
    }
  
    #loadingspinner
    {
        display: table-cell;
        vertical-align:middle;
        width: 100%;
        text-align: center;
        font-size:larger;
        padding-top:80px;
    }

/*style rules for error messages*/
.field-validation-error {
	color: #ff0000;
}

.field-validation-valid {
	display: none;
}

.input-validation-error {
	border: 1px solid #ff0000;
	background-color: #ffeeee;
}

.validation-summary-errors {
	font-weight: bold;
	color: #ff0000;
}

.validation-summary-valid {
	display: none;
}
/*bolding special areas in articles*/
span.special
{
    font-weight:bold;
    font-style:italic;
    background-color:#ccc;
    padding:2px;
}

/* #Media Queries
================================================== */

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {
	
	#portfolio-list {width: 780px}
	
	}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {
	
	#style-switcher {display: none}
	#portfolio-list {width: 780px}
	#profile .center {display: block; margin-left: 25px; width: 260px}

	}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
	
	#style-switcher {display: none}
	.responsive-nav {display: block}
	.menu {top: 0;height: 174px;position:absolute;width: 720px;left: 0;}
	#portfolio-list {width: 720px}
	
	
	}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {
	
	.menu.responsive-nav {display: block}
  #style-switcher, .nav{display: none}
  .menu {top: 0;height: 20px;position:relative;width:420px;left: 0;margin: 0 auto;}
  #portfolio-list {width: 460px}
	#portfolio-list li {margin-right:15px;height:290px;}
	#resume .year {margin: 15px 0;}
	
	}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {
	
	.map-content {width: 100%;height: 240px;}
	#map {height: 260px;margin: 5px 0 20px 0;}
	.responsive-nav {display: block}
	#logo {display: block; padding: 0; background-image: none;}
	#header {height: 145px}
	#resume .year {margin: 15px 0;}
	#socials {top: 100px;}
	#style-switcher, .nav {display: none}
	
	.adipoli-box{display: none}
	.menu {height: 20px;position:relative;width:300px;margin: 0 auto;}
	#portfolio-list {width: 300px;margin: 0 auto;}
	#portfolio-list li {float: left;padding: 15px 5px 5px 5px;margin-right:0;height:290px;width:100%;}
	
	}

/*dt*/

dt, dd{
    font-size:.8em;
}
p { 
       margin: 0 0 20px 0;
       font-size:.8em;
	}

h1, h2, h3, h4, h5, h6 {
		color: #14314f;
		font-family:Arial, Helvetica, sans-serif;
		font-weight: normal; 
	}